<template>
  <div>
    <div class="lineTime">
      <ul class="line_ul">
        <li v-for="(item, index) of data" :key="index" @click="choosetime(index, item.date)">
          <i :class="index == i ? 'border' : 'gray'"></i>
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
    <router-view @childByvalue="childByvalue"></router-view>
  </div>
</template>
<script>
var pageurl;
export default {
  data() {
    return {
      i: 0,
      data: [],
      data2: [],
      choose: "",
      lookUrl: 1,
      productList: [{}], //所有数据
      totalPage: 1, // 统共页数，默认为1
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 3, // 每页显示数量
      currentPageData: [],
      show: true,
      year: "",
    };
  },
  created() {
    // this.setCurrentPageData();
    this.time();
  },
  // components: {
  //   linzhan2detail
  // },
  updated() {},
  methods: {
    time() {
      var time = new Date();
      var year = time.getFullYear();
      var y = year;

      for (var i = 0; i < 8; i++) {
        var obj = {};
        if (y == year) {
          obj.name = "当前年份";
        } else {
          obj.name = y;
        }
        obj.date = y;
        if (i == 7) {
          obj.name = y + "以前";
        }
        y--;
        this.data.push(obj);
      }

      // console.log(this.data);
    },
    more(id) {
      this.show = false;
      this.lookUrl = id;
      // console.log(this.lookUrl)
    },
    choosetime(index, year) {
      this.i = index;
      this.$router
        .push({
          path: "/linzhan/line/year1/:id",
          query: { lookUrl: year, orderId: "临时展览" },
        })
        .catch((err) => {
          err;
        });
    },

    childByvalue(val) {
      this.i = val;
      // console.log(val);
    },
  },
  watch: {},
};
</script>
<style scoped>
ul,
p,
li {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
.lineTime {
  margin-top: 40px;
  margin-left: 20px;
  margin-right: 60px;
  font-size: 18px;
}
.lineTime_ul {
}
.lineTime ul {
  border-top: 3px solid #bfbfbf;
  padding-top: 28px;
  display: flex;
  width: 1000px;

  margin: auto;
}
.lineTime li {
  margin-bottom: 70px;
  position: relative;
  margin-right: 73px;
  cursor: pointer;
}
.border {
  border: 2px solid #4e69a1;
  background: white;
}
.gray {
  background: #bfbfbf;
}
.lineTime i {
  width: 18px;
  height: 18px;
  display: inline-block;

  border-radius: 50%;
  position: absolute;
  left: 15px;
  top: -40px;
}

.lz li {
  display: flex;
  box-sizing: border-box;
  padding: 20px;
  justify-content: space-between;
  margin-bottom: 45px;
  background: #f5f5f5;
}

.lz_right {
  width: 600px;
  box-sizing: border-box;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.title1 {
  color: #333333;
  font-size: 24px;
  margin-bottom: 10px;
}
.place {
  height: 150px;
  font-size: 18px;
  line-height: 35px;
  color: #666666;
}

.more {
  font-size: 16px;
  margin-bottom: 10px;
  align-self: flex-end;
  cursor: pointer;
}
.content1 {
  font-size: 12px;
  line-height: 0px;
}
.table {
  margin-bottom: 100px;
}
/* fenye */
#page {
  text-align: center;
  margin-bottom: 85px;
}
#page >>> .el-pager li {
  border: 1px solid gray;
  margin-right: 20px;
  min-width: 30px;
  height: 30px;
  border-radius: 2px;
}
#page >>> .el-pager li.active {
  color: white;
  cursor: default;
  background: rgb(78, 105, 161);
}
#page >>> .el-icon-arrow-right::before,
#page >>> .el-icon-arrow-left::before {
  content: "";
}
#page >>> .el-pagination .btn-next,
#page >>> .el-pagination .btn-prev {
  height: 40px;
  background: url("../../assets/image/fenye_right.png") no-repeat;
  background-size: auto 30px;
}

#page >>> .el-pagination .btn-prev {
  background: url("../../assets/image/fenye_left.png") no-repeat;
  background-size: auto 30px;
}
</style>
